<template>
  <div>
    <div class="center-pane wide">
      <el-container>
        <el-aside width="16vw" class="poems-sidebar">
          <mat-nav></mat-nav>
        </el-aside>
        <el-main class="poems-main">
          <mat-list :mode="mode"></mat-list>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
import MatNav from "./mats/MatNav.vue"
import MatList from "./mats/MatList.vue"
import { PoemMode } from "@/js/constants.js"

export default {
  components: {
    MatNav,
    MatList,
  },
  created() {
    this.$store.dispatch("setActiveMenuIndex", "/poems");
    this.mode = this.getMode();
  },
  watch: {
    $route() {
      this.mode = this.getMode();
    },
  },
  data() {
    return {
      mode: PoemMode.Fav,
    };
  },
  methods: {
    filterAuthor(a) {
      console.log("main filter author!", a);
    },
    getMode() {
      let path = this.$route.path;
      let node = path.split("/").pop();
      switch (node) {
        case "fav":
          return PoemMode.Fav;
        case "discover":
          return PoemMode.Discover;
        case "resources":
          return PoemMode.Resources;
      }
    },
  },
};
</script>

<style lang="stylus">
.poems-sidebar
  padding 1vh 0 0 0
  border-right 1px solid #eee
  box-shadow 4px 0 4px -4px rgba(0,0,0,.1)

  .poem-stats
    text-align left

    .stats-title
      font-weight bold

.poems-main
  padding 0 0 0 1vw

.poems-header
  padding 5px
  border-bottom 1px solid #eee
</style>

